<template>
    <div class="home">
        <div class="Recone">
            <div class="Reconefle">
                <div class="Recrighte">
                    <div class="RecrightTietle" > 碎片阅读 </div>
                </div>
                <div class="Recleft" :style="{backgroundImage:`url(${img})`}">

                    <div class="Chosecot" v-html="randomItem.neirong">

                    </div>
                </div>

                <div class="Recright">
                    <ul class="Recright_top u-f" @click="Choseup" >
                        <img src="../../assets/up.svg" alt="">
                    </ul>

                    <ul class="Recright_middle u-f" >
                        <img v-if="Isshow" src="../../assets/like.svg" @click="ChangeSvg(randomItem.shownimg)" alt="">
                        <img v-else src="../../assets/enjoy.svg" @click="ChangeSvg()" alt="">
                    </ul>
                    <div class="Chosebtn"  @click="ChoseRadom(poeamList)" v-bind="poeamList"> 开始推荐 </div>
                    <ul class="Recright_bottom u-f" @click="Chosedown" >
                        <img src="../../assets/down.svg" alt="">
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    export default {
        methods:{
            ChangeSvg(show){
                this.randomItem.shownimg = !show;
                this.Isshow = this.randomItem.shownimg;
            },
            ChoseRadom(item){
                if(item.length>0){


                    this.randomItem = item[Math.floor(Math.random() * item.length)];
                    // console.log(this.randomItem);
                    this.ReadHis.push(this.randomItem)
                    for(var i = 0; i < item.length; i++){
                        if(item[i].id === this.randomItem.id){
                            item.splice(i,1);

                            this.ReadHisNumber = this.ReadHis.length;
                            console.log(this.ReadHisNumber)

                        }
                    }
                    this.Isshow = this.randomItem.shownimg;
                    console.log(this.Isshow)
                }else{
                    alert('今日推荐已阅读完')
                }

                // let length  = this.ReadHIs.length
                // this.ReadHisNumber = length;

            },
            Choseup(){
                if(this.ReadHisNumber>1){
                    this.randomItem = this.ReadHis[this.ReadHisNumber-2];
                    console.log(this.ReadHisNumber)
                    console.log(this.ReadHis[this.ReadHisNumber-1])
                    this.Isshow = this.randomItem.shownimg;
                    return this.ReadHisNumber--;

                }else{
                    alert('已经是第一条了')
                }
            },
            Chosedown(){
                if(this.ReadHisNumber<this.ReadHis.length){
                    this.randomItem = this.ReadHis[this.ReadHisNumber];
                    this.Isshow = this.randomItem.shownimg;
                    return this.ReadHisNumber++;
                }else{

                    alert('已经是最后一条了')
                }
            }
        },
        data(){
            return{
                img:require('../../assets/jpg.jpg'),
                randomItem:'',
                ReadHis:[],
                Choserun:true,
                ReadHisNumber:0,
                Isshow:true,
                poeamList:[
                {
                    id:'哀歌',
                    name:'雪莱',
                    neirong:'哦，世界！哦，时间！哦，生命！</br>我登上你们的最后一层，</br>不禁为我曾立足的地方颤抖；</br>你们几时能再光华鼎盛？</br>噢，永不再有，——永不再有！</br>从白天和黑夜的胸怀</br>一种喜悦已飞往天外；</br>初春、盛夏和严冬给我的心头</br>堆满了悲哀，但是那欢快，</br>噢，永不再有，——永不再有！',
                }
                ,{
                    id:'神秘的和歌',
                    name:'歌德',
                    neirong:'一切消逝的</br>不过是象征；</br>那不美满的</br>在这里完成；</br>不可言喻的</br>在这里实行；</br>永恒的女性</br>引我们上升。',
                }
                ,{
                    id:'飞鸟集',
                    name:'泰戈尔',
                    neirong:'夏天的飞鸟 飞到我的窗前唱歌 又飞去了。</br>秋天的黄叶 它们没有什么可唱 只叹息一声 飞落在那里。',
                }
                ,{
                    id:'假如生活欺骗了你',
                    name:'普希金',
                    neirong:'假如生活欺骗了你</br>假如生活欺骗了你，</br>不要忧郁，也不要愤慨！</br>不顺心时暂且克制自己，</br>相信吧，快乐之日就会到来。</br>我们的心儿憧憬着未来，</br>现今总是令人悲哀</br>一切都是暂时的，转瞬即逝，</br>而那逝去的将变得可爱。',
                }

            ]
        }
    }
}
</script>

